<script setup lang="ts">
import { useRouter } from 'vue-router';
import request from '@/utils/axios';
import { onMounted, ref } from 'vue'
import {getCurrentUser} from '@/services/user.ts'
const router = useRouter()
const userLogout = async () => {
    await request.post('user/logout')
    router.push('user/login')
}
const userInfo = ref()
onMounted(async () => {
    const res = await getCurrentUser()
    res.avatarUrl = "data:image/png;base64," + res.avatarUrl
    userInfo.value = res 
})
</script>
<template>
    <div v-if="userInfo">
        <div class="user" style="text-align: center;">
            <van-image round width="10rem" height="10rem" :src="userInfo.avatarUrl"
                style="margin-top: 20px; margin-bottom: 20px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4)" />
        </div>
        <van-cell title="当前登录用户" :value="userInfo.userAccount" />
        <van-cell title="修改信息" is-link to="/user/update" />
        <van-cell title="我创建的队伍" is-link to="/user/team/create" />
        <van-cell title="我加入的队伍" is-link to="/user/team/join" />
        <van-cell title="联系作者" is-link to="/contact" />
        <van-button block type="warning" @click="userLogout" class="logoutBtn" round>退出登录</van-button>
    </div>
</template>

<style scoped lang='scss'>
.logoutBtn{
    
    width: 200px;
    margin: auto;
    margin-top: 20px;
}
</style>